<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,user-scalable=no" />
		<title>上拉加载</title>
		<style type="text/css">
			body{
				margin: 0;
			}
			body,html{
				height: 100%;
				position: relative;
				overflow: hidden;
			}
			ul{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			header{
				height: 2rem;
				background: #000;
				line-height: 2rem;
				color: #fff;
				font-size: .8rem;
				text-align: center;
				position: relative;
			}
			#box,.imgWrap{
				position: absolute;
				top: 2rem;
				bottom: 0;
				left: 0;
				width:100%;
				overflow: hidden;
			}
			#list{
				overflow: hidden;
			}
			#list li{
				width: 7rem;
				height: 7rem;
				margin: .5rem;
				float: left;
				background: pink;
			}
			#list img{
				display: block;
				width: 100%;
			}
			#imgPage{
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				right:0;
				background:#ccc;
			}
			#bigImg{
				position: absolute;
				left: 3rem;
				top: 50%;
				margin-top: -5rem;
				width: 10rem;
				height: 10rem;
			}
			#backBtn{
				position: absolute;
				left: 0;
				top: 0;
				width: 2rem;
				height: 2rem;
				color: #fff;
				font-size: 1.6rem;
				line-height: 2rem;
				text-align: center;
				text-decoration: none;
			}
			#imgNavs{
				position: absolute;
				left: 0;
				top: 0;
				right:0;
				height: 2rem;
				background: #fff;
			}
			#imgNavs a{
				float: left;
				width: 4rem;
				font-size:.6rem ;
				text-align: center;
				color: #000;
				text-decoration: none;
				line-height: 2rem;
				border:1px solid #666;
				box-sizing: border-box;
			}
		</style>
		<script>
			(function(){
				var html = document.documentElement;
				var width = html.clientWidth;
				html.style.fontSize = width/16 + "px";
			})()
		</script>
	</head>
	<body>
		<header>上拉刷新</header>
		<div id="box">
			<ul id="list">
				<li><img src="img/01.jpg"/></li>
				<li><img src="img/02.jpg"/></li>
				<li><img src="img/03.jpg"/></li>
				<li><img src="img/04.jpg"/></li>
			</ul>
		</div>
		<section id="imgPage">
			<header>大图预览<a href="javascript:;" id="backBtn"><</a></header>
			<div class="imgWrap">
				<img src="img/01.jpg" id="bigImg" />
				<nav id="imgNavs">
					<a href="javascript:;">向左旋转90</a>
					<a href="javascript:;">向右旋转90</a>
					<a href="javascript:;">放大</a>
					<a href="javascript:;">缩小</a>
				</nav>
			</div>
		</section>
		<script src="js/m.Tween.js"></script>
		<script>
			document.addEventListener('touchstart',function(e){
				e.preventDefault();
			});
			setBigImg();
			function setBigImg(){
				var bigImg = document.querySelector("#bigImg");
				var navs = document.querySelectorAll("#imgNavs a")
				var startRotate = 0;
				var startScale = 0;
				var maxScale = 1.5;
				var minScale = .5;
				setGesture({
					el: bigImg,
					start: function(e){
						startRotate = css(this,"rotate");
						startScale = css(this,"scale")/100;
					},
					change:function(e){
						var scale = startScale * e.scale;
						if(scale > maxScale){
							scale = maxScale;
						}else if(scale < minScale){
							scale = minScale;
						}
						css(this,"rotate",startRotate + e.rotation);
						css(this,"scale",scale*100);
					},
					end:function(){
						var deg = css(this,"rotate");
						deg = Math.round(deg/90);
						deg = deg * 90;
						MTween({
							el:this,
							target:{rotate:deg},
							time:300,
							type:"easeBoth"
						});
					}
					
				});
				navs[0].addEventListener("touchend",function(){
					var deg = css(bigImg,"rotate");
					deg = Math.round(deg/90)+1;
					deg = deg * 90;
					MTween({
						el:bigImg,
						target:{rotate:deg},
						time:300,
						type:"easeBoth"
					}); 
				});
				navs[1].addEventListener("touchend",function(){
					var deg = css(bigImg,"rotate");
					deg = Math.round(deg/90)-1;
					deg = deg * 90;
					MTween({
						el:bigImg,
						target:{rotate:deg},
						time:300,
						type:"easeBoth"
					}); 
				});
				navs[2].addEventListener("touchend",function(){
					var scale = css(bigImg,"scale")/100;
					scale += .1;
					if(scale > maxScale){
						scale = maxScale
					};
					MTween({
						el:bigImg,
						target:{scale:scale*100},
						time:300,
						type:"easeBoth"
					}); 
				});
				navs[3].addEventListener("touchend",function(){
					var scale = css(bigImg,"scale")/100;
					scale -= .1;
					if(scale < minScale){
						scale = minScale
					};
					MTween({
						el:bigImg,
						target:{scale:scale*100},
						time:300,
						type:"easeBoth"
					}); 
				});
			};
			function getDis(point1,point2){  //双指缩放
				var x = point2.x - point1.x;
				var y = point2.y - point1.y;
				return Math.sqrt(x*x + y*y);
			};
			function getDeg(point1,point2){  //双指
				var x = point2.x - point1.x;
				var y = point2.y - point1.y;
				return Math.atan2(y,x)*180/Math.PI;
			};
			function setGesture(init){
				var el = init.el;
				var isGestrue = false; 
				var startPoint = [];
				if(!el){
					return;
				}
				el.addEventListener('touchstart',function(e){
					if(e.touches.length >= 2){
						isGestrue = true;//记录当前用户触发了gesture
						startPoint[0] = {x:e.touches[0].pageX,y:e.touches[0].pageY};
						startPoint[1] = {x:e.touches[1].pageX,y:e.touches[1].pageY};
						init.start&&init.start.call(el,e);
						
					}
				});
				el.addEventListener('touchmove',function(e){
					if(isGestrue&&e.touches.length >= 2){
						var nowPoint = [];
						nowPoint[0] = {x:e.touches[0].pageX,y:e.touches[0].pageY};
						nowPoint[1] = {x:e.touches[1].pageX,y:e.touches[1].pageY};
						var startDis = getDis(startPoint[0],startPoint[1]);
						var nowDis = getDis(nowPoint[0],nowPoint[1]);
						var startDeg = getDeg(startPoint[0],startPoint[1]);
						var nowDeg = getDeg(nowPoint[0],nowPoint[1]);
						e.scale = nowDis/startDis;
						e.rotate = nowDeg - startDeg;
						init.change&&init.change.call(el,e)
					}
				});
				el.addEventListener("touchend",function(e){
					if(isGestrue){
						if(e.touches.length < 2 || e.targetTouches.length < 1 ){
							isGesture = false;
							init.end&&init.end.call(el,e)
						}
					}
				});
			};
		</script>
	</body>
</html>
